<template>
  <div class="admin">
    <!-- 公告和反馈意见 -->
    <a-row>
      <a-col
        style="padding: 0 12px"
        :xl="12"
        :lg="24"
        :md="24"
        :sm="24"
        :xs="24"
      >
        <!-- <a-card :loading="loading" title="公告" :bordered="false">
          <a-button slot="extra" type="primary" @click="visible = true"
            >发布公告</a-button
          >

          <a-list :pagination="pagination" :data-source="activities">
            <a-list-item slot="renderItem" key="item.id" slot-scope="item">
              <div>
                <span> <a-icon type="notification" />公告{{ item.id }}: </span>
                <em>{{ item.content }}</em>
              </div>
              <a @click="delNotice(item.id)">删除</a>
            </a-list-item>
          </a-list>
        </a-card> -->
      </a-col>
      <a-col
        style="padding: 0 12px"
        :xl="12"
        :lg="24"
        :md="24"
        :sm="24"
        :xs="24"
      >
        <a-card :loading="loading" title="反馈意见" :bordered="false">
          <a-list :pagination="pagination2" :data-source="feedbackList">
            <a-list-item slot="renderItem" key="item.id" slot-scope="item">
              <div>
                <span> <a-icon type="sketch" />反馈{{ item.id }}: </span>
                <a-tag color="orange">
                  {{
                    item.status == 1
                      ? '分类部分'
                      : item.status == 2
                      ? '商品部分'
                      : item.status == 3
                      ? '订单部分'
                      : '其他部分'
                  }}
                </a-tag>
                <div>
                  详情：<b>{{ item.desc }}</b>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>

    <!-- 商铺 -->
    <a-row style="margin: 10px 0">
      <a-card title="所有商铺">
        <FilterForm @getProject="getProject"></FilterForm>

        <a-list
          item-layout="vertical"
          size="large"
          :pagination="pagination"
          :data-source="projectList"
          :loading="listLoading"
        >
          <a-list-item slot="renderItem" key="item.id" slot-scope="item">
            <img
              slot="extra"
              width="100"
              alt="logo"
              :src="
                item.logo ||
                  'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png'
              "
            />
            <a-list-item-meta :description="item.description">
              <a slot="title" :href="item.href" @click="changeData(item)"
                >{{ item.s_admin.name }}的 {{ item.name }} 项目id:
                {{ item.id }}</a
              >
            </a-list-item-meta>
            <p class="desc">{{ item.desc }}</p>
            <a :href="item.url" target="_blank">项目预览地址</a>
          </a-list-item>

          <!-- 底部组件 -->
          <!-- <div slot="footer"><b>ant design vue</b> footer part</div> -->
        </a-list>
      </a-card>
    </a-row>

    <!-- 发布公告 -->
    <a-modal
      title="发布公告"
      :visible="visible"
      @ok="handlePost"
      @cancel="visible = false"
    >
      <a-form-item
        label="具体内容"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 17 }"
        class="stepFormText"
        required
      >
        <a-textarea
          v-model="value"
          placeholder="请输入具体内容"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
// import { getNoticesList, postNotice, delNotice } from "@/services/notice";
// import { getfeedbackList } from '@/services/feedback';
import { projectsList, getProjectByID } from '@/services/project';
import { getCustomerInfo } from '@/services/user';
import { mapMutations } from 'vuex';
import FilterForm from '@/components/form/FilterForm';
import { message } from 'ant-design-vue';
export default {
  name: 'admin',
  components: { FilterForm },
  created() {
    this.NoticesList();
    // this.getFeedbackList();
    this.loading = false;

    // 获取所有项目信息
    projectsList({ getall: true })
      .then((res) => {
        //
        this.adminProject = res.result.splice(-1, 1);
        this.projectList = res.result;
      })
      .catch((err) => {
        this.$message.error(err.msg);
      });
  },
  data() {
    return {
      value: '',
      loading: true,
      adminProject: [],
      projectList: [],
      activities: [],
      feedbackList: [],
      listLoading: false,
      pagination: {
        pageSize: 3,
      },
      pagination2: {
        pageSize: 3,
      },
      visible: false,
    };
  },
  methods: {
    ...mapMutations('account', ['setUser']),
    ...mapMutations('setting', ['setSystemName', 'setSystemLogo']),

    // 用于搜索的项目请求
    getProject(data) {
      let temp = {};

      // 控制loading动画
      this.listLoading = true;

      // 项目名查询
      if (data.type === 'projectName' || data.keywords.length === 0) {
        temp.name = data.keywords;
        projectsList(temp)
          .then((res) => {
            // 过滤掉超管的项目
            if (res.result[0].id) {
              res.result = res.result.filter((item) => {
                return item.user_id !== 1;
              });
              this.$message.success('查询成功');
              this.projectList = res.result;
              this.listLoading = false;
            } else {
              this.$message.warn('未找查到数据');
              this.listLoading = false;
            }
          })
          .catch((err) => {
            //
            this.$message.error(err.msg);
            this.listLoading = false;
          });
      } else if (data.type === 'userName') {
        if (data.keywords.length <= 0) return message.warning('请输入关键字！');
        // 用户名查询，获取用户ID
        getCustomerInfo(data.keywords)
          .then((res) => {
            if (res.msg === '成功操作') {
              let user_id = res.result.id;

              // 根据用户ID查询对应所有项目
              projectsList({ id: user_id }).then((res) => {
                if (res.msg === '成功操作') {
                  this.$message.success('查询成功');
                  this.projectList = res.result;
                }
                this.listLoading = false;
              });
            }
          })
          .catch((error) => {
            if (error) {
              this.$message.error(error.msg);
              this.listLoading = false;
            }
          });
      } else {
        if (data.keywords.length <= 0 || isNaN(Number(data.keywords)))
          return message.warning('请输入关键字！必须是数字！');
        // 根据项目id 查询项目
        getProjectByID({ project_id: data.keywords })
          .then((res) => {
            if (!res.data) {
              this.projectList = [];
              return this.$message.error('该项目id不存在');
            }
            this.$message.success('查询成功');
            this.projectList = [res.data];
            //
          })
          .catch((error) => {
            if (error) {
              this.$message.error(error.msg);
            }
          });
        this.listLoading = false;
      }
    },
    // 数据切换
    changeData(data) {
      //记录超管logo和title放入adminInfo
      if (localStorage.getItem('adminInfo')) {
        let adminInfo = JSON.parse(localStorage.getItem('adminInfo'));
        adminInfo.title = sessionStorage.getItem('title');
        adminInfo.logo = sessionStorage.getItem('logo');
        localStorage.setItem('adminInfo', JSON.stringify(adminInfo));
      }

      // 获取该项目所有者的数据
      getCustomerInfo(data.user_id)
        .then((res) => {
          this.setUser(res.result);
          data.title
            ? this.setSystemName(data.title)
            : this.setSystemName('蓝景项目管理平台');
          data.logo ? this.setSystemLogo(data.logo) : this.setSystemLogo('');

          //获取用户的token添加在请求头
          localStorage.setItem('e-token', res.result.token);
          // 先清除sessionStorage的信息，防止受到上个用户的信息影响
          sessionStorage.clear();
          data.title
            ? sessionStorage.setItem('title', data.title)
            : sessionStorage.setItem('title', '蓝景项目管理平台');
          data.logo
            ? sessionStorage.setItem('logo', data.logo)
            : sessionStorage.setItem('logo', '');
          // https://bluej.cn/newbluejsite/images/bluej_favicon.ico
          this.$message.success(
            `成功切换项目至${res.result.name}的${data.name}`
          );
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    NoticesList() {
      // getNoticesList().then((res) => {
      //   this.activities = res.result;
      // });
    },
    // getFeedbackList() {
    //   getfeedbackList().then((res) => {
    //     this.feedbackList = res.result;
    //   });
    // },
    handlePost() {
      // postNotice({ content: this.value })
      //   .then((res) => {
      //     this.$message.success(res.msg);
      //     this.NoticesList();
      //     this.visible = false;
      //   })
      //   .catch((err) => {
      //     this.$message.error(err.msg);
      //   });
    },
    delNotice() {
      // delNotice(id)
      //   .then((res) => {
      //     this.$message.success(res.msg);
      //     this.NoticesList();
      //   })
      //   .catch((err) => {
      //     this.$message.error(err.msg);
      //   });
    },
  },
};
</script>

<style lang="css">
.desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.ant-list-item-extra img {
  width: 150px;
}
</style>
